<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/login.css">
    <title>Login</title>
</head>
<body>
<header class="header w">
    <div class="logo">
        <h1>
            <a href="index.html" title="移动营业厅">移动营业厅</a>
        </h1>
    </div>
</header>
<h1>登录</h1>
<form id="loginForm" onsubmit="login(event)">
    <input type="text" name="phone_number" id="phone_number" placeholder="手机号码" required>
    <br>
    <input type="password" name="password" id="password" placeholder="密码" required>
    <br>
    <button type="submit">登录</button>
</form>
<p>Don't have an account? <a href="register.html">Register here</a></p>
<script>
    function login(event) {
        event.preventDefault();
        var phoneNumber = document.getElementById("phone_number").value;
        var password = document.getElementById("password").value;
        var user = {
            phoneNumber: phoneNumber,
            password: password
        };
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/login", true);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        alert("登录成功！");
                        window.location.href = "index.html?login=success&phone=" + phoneNumber;
                    } else {
                        alert("登录失败：" + response.message);
                    }
                } else {
                    alert("Error: " + xhr.status);
                }
            }
        };
        xhr.send(JSON.stringify(user));
    }
</script>
</body>
</html>
